'use client'

import { useState } from 'react'
import { Wand2, Sparkles } from 'lucide-react'
import { storyThemes, ageGroups, storyLengths } from '@/types/story'

interface StoryFormProps {
  onSubmit: (data: {
    theme: string
    ageGroup: string
    storyLength: string
    includeComics?: boolean
  }) => void
  isGenerating: boolean
}

export default function StoryForm({ onSubmit, isGenerating }: StoryFormProps) {
  const [formData, setFormData] = useState({
    theme: 'friendship',
    ageGroup: '6-8',
    storyLength: 'medium',
    includeComics: true, // 默认包含卡通漫画
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }

  const handleChange = (field: string, value: string | boolean) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* 主题选择 */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-3">
          选择故事主题
        </label>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {storyThemes.map((theme) => (
            <label
              key={theme.value}
              className={`relative flex cursor-pointer rounded-lg border p-4 shadow-sm focus:outline-none ${
                formData.theme === theme.value
                  ? 'border-primary-500 ring-2 ring-primary-500'
                  : 'border-gray-300'
              }`}
            >
              <input
                type="radio"
                name="theme"
                value={theme.value}
                checked={formData.theme === theme.value}
                onChange={(e) => handleChange('theme', e.target.value)}
                className="sr-only"
              />
              <div className="flex flex-1">
                <div className="flex flex-col">
                  <span className="block text-sm font-medium text-gray-900">
                    {theme.label}
                  </span>
                  <span className="mt-1 flex items-center text-sm text-gray-500">
                    {theme.description}
                  </span>
                </div>
              </div>
              <div className="ml-4 flex flex-shrink-0">
                <div
                  className={`h-4 w-4 rounded-full border-2 ${
                    formData.theme === theme.value
                      ? 'border-primary-500 bg-primary-500'
                      : 'border-gray-300'
                  }`}
                />
              </div>
            </label>
          ))}
        </div>
      </div>

      {/* 年龄组和故事长度 */}
      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-3">
            目标年龄
          </label>
          <div className="space-y-3">
            {ageGroups.map((age) => (
              <label
                key={age.value}
                className={`relative flex cursor-pointer rounded-lg border p-3 shadow-sm focus:outline-none ${
                  formData.ageGroup === age.value
                    ? 'border-primary-500 ring-2 ring-primary-500'
                    : 'border-gray-300'
                }`}
              >
                <input
                  type="radio"
                  name="ageGroup"
                  value={age.value}
                  checked={formData.ageGroup === age.value}
                  onChange={(e) => handleChange('ageGroup', e.target.value)}
                  className="sr-only"
                />
                <div className="flex flex-1">
                  <div className="flex flex-col">
                    <span className="block text-sm font-medium text-gray-900">
                      {age.label}
                    </span>
                    <span className="mt-1 flex items-center text-sm text-gray-500">
                      {age.description}
                    </span>
                  </div>
                </div>
                <div className="ml-4 flex flex-shrink-0">
                  <div
                    className={`h-4 w-4 rounded-full border-2 ${
                      formData.ageGroup === age.value
                        ? 'border-primary-500 bg-primary-500'
                        : 'border-gray-300'
                    }`}
                  />
                </div>
              </label>
            ))}
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-3">
            故事长度
          </label>
          <div className="space-y-3">
            {storyLengths.map((length) => (
              <label
                key={length.value}
                className={`relative flex cursor-pointer rounded-lg border p-3 shadow-sm focus:outline-none ${
                  formData.storyLength === length.value
                    ? 'border-primary-500 ring-2 ring-primary-500'
                    : 'border-gray-300'
                }`}
              >
                <input
                  type="radio"
                  name="storyLength"
                  value={length.value}
                  checked={formData.storyLength === length.value}
                  onChange={(e) => handleChange('storyLength', e.target.value)}
                  className="sr-only"
                />
                <div className="flex flex-1">
                  <div className="flex flex-col">
                    <span className="block text-sm font-medium text-gray-900">
                      {length.label}
                    </span>
                    <span className="mt-1 flex items-center text-sm text-gray-500">
                      {length.description}
                    </span>
                  </div>
                </div>
                <div className="ml-4 flex flex-shrink-0">
                  <div
                    className={`h-4 w-4 rounded-full border-2 ${
                      formData.storyLength === length.value
                        ? 'border-primary-500 bg-primary-500'
                        : 'border-gray-300'
                    }`}
                  />
                </div>
              </label>
            ))}
          </div>
        </div>
      </div>

      {/* 卡通漫画选项 */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-3">
          插图风格
        </label>
        <div className="space-y-3">
          <label className="relative flex cursor-pointer rounded-lg border p-4 shadow-sm focus:outline-none">
            <input
              type="checkbox"
              checked={formData.includeComics}
              onChange={(e) => handleChange('includeComics', e.target.checked)}
              className="sr-only"
            />
            <div className="flex flex-1">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <Sparkles className="h-5 w-5 text-yellow-500" />
                </div>
                <div className="ml-3">
                  <span className="block text-sm font-medium text-gray-900">
                    包含卡通漫画
                  </span>
                  <span className="block text-sm text-gray-500">
                    生成多张卡通风格的漫画插图，让故事更加生动有趣
                  </span>
                </div>
              </div>
            </div>
            <div className="ml-4 flex flex-shrink-0">
              <div
                className={`h-4 w-4 rounded border-2 ${
                  formData.includeComics
                    ? 'border-primary-500 bg-primary-500'
                    : 'border-gray-300'
                }`}
              >
                {formData.includeComics && (
                  <svg className="h-3 w-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                )}
              </div>
            </div>
          </label>
        </div>
      </div>

      {/* 生成按钮 */}
      <div className="flex justify-center">
        <button
          type="submit"
          disabled={isGenerating}
          className="btn-primary flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isGenerating ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
              <span>正在生成故事...</span>
            </>
          ) : (
            <>
              <Wand2 className="h-4 w-4" />
              <span>生成英语绘本故事</span>
            </>
          )}
        </button>
      </div>
    </form>
  )
} 